<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="/editorJfinalProject/css/recomStyle.css">

    <script type="text/javascript" src="/editorJfinalProject/js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="/editorJfinalProject/js/jquery.Jcrop.js"></script>

    <script>

        $(document).ready(function () {
            $("#div1").on("click",function(){
                $("#aa",parent.document).Jcrop({
                    aspectRatio: 1.333333,
                    onChange: window.parent.showCoords,
                    onSelect: window.parent.showCoords,
                    /*设置初始选框的大小*/
                    setSelect: [0, 0, 480, 360],
                });
                $("#preview_box",parent.document).addClass('crop_preview');
            });
            $("#div2").on("click",function(){
                $("#aa",parent.document).Jcrop({
                    aspectRatio: 1.25,
                    onChange: window.parent.showCoords,
                    onSelect: window.parent.showCoords,
                    /*设置初始选框的大小*/
                    setSelect: [0, 0, 480, 384],
                });
                $("#preview_box",parent.document).removeClass("crop_preview3");
                $("#preview_box",parent.document).addClass('crop_preview2');
            });
            $("#div3").on("click",function(){
                $("#aa",parent.document).Jcrop({
                    aspectRatio: 1.777777,
                    onChange: window.parent.showCoords,
                    onSelect: window.parent.showCoords,
                    /*设置初始选框的大小*/
                    setSelect: [0, 0, 480, 270],
                });
                $("#preview_box",parent.document).addClass('crop_preview3');
            });

//            function showCoords(obj) {
//                $("#x",parent.document).val(obj.x);
//                $("#y",parent.document).val(obj.y);
//                $("#w",parent.document).val(obj.w);
//                $("#h",parent.document).val(obj.h);
//                if (parseInt(obj.w) > 0) {
//                    //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
//                    var rx = $("#preview_box",parent.document).width() / obj.w;
//                    var ry = $("#preview_box",parent.document).height() / obj.h;
//                    //通过比例值控制图片的样式与显示
//                    $("#crop_preview",parent.document).css({
//                        //预览图片宽度为计算比例值与原图片宽度的乘积
//                        width: Math.round(rx * $("#aa",parent.document).width()) + "px",
//                        //预览图片高度为计算比例值与原图片高度的乘积
//                        height: Math.round(rx * $("#aa",parent.document).height()) + "px",
//                        marginLeft: "-" + Math.round(rx * obj.x) + "px",
//                        marginTop: "-" + Math.round(ry * obj.y) + "px"
//                    });
//                }
//            }
        });
    </script>
</head>
<body>
    <div id="div1" class="div1"></div>
    <div class="div23">
        <div id="div2" class="div2"></div>
        <div id="div3" class="div3"></div>
    </div>
    <div id="div4" class="div4"></div>
    <div id="div5" class="div5"></div>
    <div id="div6" class="div6"></div>
    <div id="div7" class="div7"></div>

</body>
</html>